<template>
  <!-- 巡查记录 -->
  <view class="inspection">
    <view class="wrapper-content">
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        @scroll="scrollHeight"
        :style="[
          {
            height: !loading && !noMore ? '100%' : '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view
          class="wrapper-item"
          v-for="(item, i) in dataSource"
          :key="i"
          :data-url="`/patrolParticulars/patrolParticulars/patrolDetail?data=${encodeURIComponent(
            JSON.stringify(item)
          )}`"
          @click="handleClickRouter"
        >
          <view class="md">
            <view class="line-hidden name">
              {{ item.restaurantName }}
            </view>
            <view class="clause">
              巡查时间：<text class="text-class">
                {{ formatters(item.createTime, "YY-MM-DD HH:mm") }}
              </text>
            </view>
            <view class="clause">
              巡查队员：
              <text class="line-hidden text-class">
                {{ item.personName }}
                <block v-if="item.personNameList.length">、</block>
                {{
                  item.personNameList.length > 1
                    ? item.personNameList.join("、")
                    : item.personNameList
                }}
              </text>
            </view>
            <view class="clause">
              巡查结果：
              <text
                class="text-class"
                :style="{
                  color: item.status == 1 ? '#333333' : '#FF2626',
                }"
              >
                {{ item.status == 1 ? "合格" : "不合格" }}
              </text>
            </view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
        >
        </u-empty>
      </view>
    </view>

    <custom-tab-bar :tabBarIndex="tabBarIndex" ref="tabRef" />
  </view>
</template>

<script>
import { dailyPatrolTaskPage } from "@/api/inspection.js";
import { whetherLogin, handleClickRouter, formatters } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      tabBarIndex: 2,
      scrollTop: 0,
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.scrollTop = 0;
    uni.removeStorageSync("scrollTop");
  },
  onShow() {
    this.token = wx.getStorageSync("X-MINI-TOKEN");
    if (!this.token) {
      whetherLogin();
      return;
    }
    this.scrollTop = uni.getStorageSync("scrollTop") || 0;

    this.pageConfig.pageNo = 1;
    this.dataSource = [];
    this.getList();
  },
  methods: {
    handleClickRouter,
    formatters,
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom(e) {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    getList() {
      let data = {
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      dailyPatrolTaskPage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.inspection {
  height: 100%;

  .wrapper-content {
    padding: 24rpx 16rpx;
    background: #f8f9fb;
    height: calc(100vh - 45px);

    .wrapper-item {
      padding: 30rpx;
      padding-bottom: 10rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;

      .md {
        .name {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          margin-bottom: 17rpx;
        }

        .clause {
          margin-bottom: 20rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;

          .text-class {
            color: #333333;
          }
        }
      }
    }
  }
}
</style>
